<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            margin: 20px 20px;
        }

        .translate:active {
            transform: translate(100px, 200px);
        }

        .translateX:active {
            transform: translateX(100px);
        }

        .translateY:active {
            transform: translateY(200px);
        }

        .translate3D:active {
            transform: translate3d(100px, 100px, 200px);
        }


        .scale:active {
            transform: scale(4, 4);
        }

        .scaleX:active {
            transform: scaleX(4);
        }

        .scaleY:active {
            transform: scaleY(4);
        }

        .scale3D:active {
            transform: scale3d(4, 4, 4);
        }


        .rotateX:active {
            transform: rotateX(44deg);
        }

        .rotateY:active {
            transform: rotateY(44deg);
        }
        .rotateZ:active {
            transform: rotateZ(44deg);
        }
        .rotate3D:active {
            transform: rotate3d(44, 44, 44, 44deg);
        }


        .skew:active {
            transform: skew(4deg, 4deg);
        }

        .skewX:active {
            transform: skewX(4deg);
        }

        .skewY:active {
            transform: skewY(4deg);
        }

    </style>
</head>
<body style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div class="translate">translate</div>
<div class="translateX">translateX</div>
<div class="translateY">translateY</div>
<div class="translate3D">translate3D</div>

<br><br><br>

<div class="scale">scale</div>
<div class="scaleX">scaleX</div>
<div class="scaleY">scaleY</div>
<div class="scale3D">scale3D</div>

<br><br><br>

<div class="rotateX">rotateX</div>
<div class="rotateY">rotateY</div>
<div class="rotateZ">rotateZ</div>
<div class="rotate3D">scale3D</div>

<br><br><br>

<div class="skew">skew</div>
<div class="skewX">skewX</div>
<div class="skewY">skewY</div>


</body>
</html>
